<template>
    <div class="myfans-container">
         <van-nav-bar
            class="app-nav-bar"
            title="关注/粉丝"
            @click-left="$router.back()"
            >
            <div slot="left">
            <van-icon color="#fff" size="25" name="arrow-left" />
            </div>
        </van-nav-bar>
        <van-tabs @change="changeFollowTabs" v-model="active" border>
            <van-tab v-for="(tab,index) in tabs" :key="index" :title="tab">
                <div class="myFans-content">
                    <!-- 我的关注 -->
                    <div class="follows" v-if="active === 0">
                        <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                        >
                            <van-cell border v-for="(follow,index) in followList" :key="index"> 
                                <div slot="icon">
                                    <van-image
                                    round
                                    width="40"
                                    height="40"
                                    fit="cover"
                                    :src="follow.photo"
                                    />
                                </div>
                                <div slot="title">{{ follow.name }}</div>
                                <div slot="label">{{ `粉丝数：${follow.fans_count}` }}</div>
                                <div slot="right-icon" class="follwer-btn">
                                    <van-button
                                      @click="followUser(follow.id,follow)"
                                      :color="follow.mutual_follow ?  '#c8ced6' : '#fc6627'" 
                                       round 
                                       type="info"
                                       >{{ follow.mutual_follow ? '取消关注' : '关注' }}
                                    </van-button>
                                </div>
                            </van-cell>
                        </van-list>    
                    </div>
                    <!-- 我的关注 -->

                    <!-- 我的粉丝 -->
                    <div class="followers" v-else>
                        <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                        >
                            <van-cell border v-for="(follower,index) in followers" :key="index"> 
                                <div slot="icon">
                                    <van-image
                                    round
                                    width="40"
                                    height="40"
                                    fit="cover"
                                    :src="follower.photo"
                                    />
                                </div>
                                <div slot="title">{{ follower.name }}</div>
                                <div slot="label">{{ `粉丝数：${follower.fans_count}` }}</div>
                                <div slot="right-icon" class="follwer-btn">
                                    <van-button
                                      @click="followUser(follower.id,follower),follower.mutual_follow = !follower.mutual_follow"
                                      :color="follower.mutual_follow ?  '#c8ced6' : '#fc6627'" 
                                       round 
                                       type="info"
                                       >{{ follower.mutual_follow ? '互相关注' : '关注' }}
                                    </van-button>
                                </div>
                            </van-cell>
                        </van-list>
                    </div>
                    <!-- 我的粉丝 -->
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import {
getUserFollows,
getUserFans,
addFollows,
deleteFollows
}from '@/api/user'
export default {
    name: 'Myfans',
    data() {
        return {
            active: 0,
            tabs: ['我的关注', '我的粉丝'],
            loading: false,
            finished: false,
            followList:[],
            followers:[],
            page: 1,
            per_page: 10
        }
    },
    mounted() {
        // this.loadUserFollows()
    },

    methods: {
        onLoad () {
            this.loadUserFollows()
        },
        changeFollowTabs (name,title) {
            this.page = 1
            name === '0' ? this.loadUserFollows() : this.loadUserFollowers()
        },
        // 加载我的关注
        async loadUserFollows () {
            const { data:{ data } } = await getUserFollows({
                page: this.page,
                per_page: this.per_page
            })
            console.log(data)
            this.followList.push(...data.results)
            // 加载状态结束
            this.loading = false
            // 数据全部加载完成
            if (data.results.length === 0) {
                this.finished = true
                return 
            }
            this.page++
        },
        //加载我的粉丝
        async loadUserFollowers () {
            const { data:{ data } } = await getUserFans({
                page: this.page,
                per_page: this.per_page
            })
            this.followers.push(...data.results)

            this.loading = false
            if (data.results.length === 0) {
                this.finished = true
                return 
            }
            this.page++
            // console.log(data)
        },
        // 关注用户
        async followUser (userId,follow) {
            if (follow.mutual_follow){
                    const {data} =  await deleteFollows(userId)
                    this.$toast.success('关注已取消')
            }else {
                    const { data } =  await addFollows(userId)
                    if (data) {
                        this.$toast.success('关注成功')
                    }
                    
                }     
            }
        }
};
</script>

<style lang="less" scoped>
.myfans-container{
    .myFans-content{
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        top: 90px;
        overflow: auto;
        .van-cell__title{
        margin-left: 10px;
        font-size: 16px;
    }
        .van-cell__label{
            font-size: 14px;
        }
        .follwer-btn{
            display: flex;
            align-items: center;
            .van-button{
                padding: 0;
                width: 1.8rem;
                height: .8rem;
                font-size: 10px;
                word-break: break-all;
            }
        }
    }
    
}
</style>